<!--
 * @Description: 
 * @Date: 2025-09-02 16:02:38
 * @LastEditTime: 2025-09-02 17:21:13
-->

<template>
    <van-nav-bar title="营销方案" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="min-h-screen " style=" background-color: #f5f7fa;
            color: #333;">
        <div class="container mx-auto px-4 py-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 方案1 -->
                <div class="relative bg-white rounded-lg p-6 card-hover">
                    <div class="recommend-badge">65%</div>
                    <div class="flex items-center mb-4">
                        <div
                            class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                            <i class="fa  fa-2x fa-newspaper-o text-xl"></i>
                        </div>
                        <h2 class="text-xl font-semibold m-0">终端1</h2>
                    </div>

                    <div class="space-y-4 text-left">
                        <div>
                            <p class="text-sm text-gray-500 mb-1">活动编号</p>
                            <p class="font-medium">950225</p>
                        </div>

                        <div>
                            <p class="text-sm text-gray-500 mb-1">活动名称</p>
                            <p class="font-medium">客户回馈1440权益金营销活动</p>
                        </div>

                        <div>
                            <p class="text-sm text-gray-500 mb-1">方案期限</p>
                            <p class="font-medium">40*36个月</p>
                        </div>

                        <div class="pt-2">
                            <div class="flex items-center justify-between text-sm mb-1">
                                <span class="text-gray-500">推荐指数</span>
                                <span class="font-medium text-blue-600">65%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 方案2 -->
                <div class="relative bg-white rounded-lg p-6 card-hover">
                    <div class="recommend-badge">78%</div>
                    <div class="flex items-center mb-4">
                        <div
                            class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
                            <i class="fa  fa-2x fa-newspaper-o text-xl"></i>
                        </div>
                        <h2 class="text-xl font-semibold m-0">终端2</h2>
                    </div>

                    <div class="space-y-4 text-left">
                        <div>
                            <p class="text-sm text-gray-500 mb-1">活动编号</p>
                            <p class="font-medium">950226</p>
                        </div>

                        <div>
                            <p class="text-sm text-gray-500 mb-1">活动名称</p>
                            <p class="font-medium">客户回馈1440权益金营销活动</p>
                        </div>

                        <div>
                            <p class="text-sm text-gray-500 mb-1">方案期限</p>
                            <p class="font-medium">36*24个月</p>
                        </div>

                        <div class="pt-2">
                            <div class="flex items-center justify-between text-sm mb-1">
                                <span class="text-gray-500">推荐指数</span>
                                <span class="font-medium text-green-600">78%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-green-600 h-2 rounded-full" style="width: 78%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 方案3 -->
                <div class="relative bg-white rounded-lg p-6 card-hover">
                    <div class="recommend-badge">82%</div>
                    <div class="flex items-center mb-4">
                        <div
                            class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
                            <i class="fa  fa-2x fa-newspaper-o text-xl"></i>
                        </div>
                        <h2 class="text-xl font-semibold m-0">终端3</h2>
                    </div>

                    <div class="space-y-4 text-left ">
                        <div>
                            <p class="text-sm text-gray-500 mb-1">活动编号</p>
                            <p class="font-medium">950227</p>
                        </div>

                        <div>
                            <p class="text-sm text-gray-500 mb-1">活动名称</p>
                            <p class="font-medium">客户回馈1440权益金营销活动</p>
                        </div>

                        <div>
                            <p class="text-sm text-gray-500 mb-1">方案期限</p>
                            <p class="font-medium">24*12个月</p>
                        </div>

                        <div class="pt-2">
                            <div class="flex items-center justify-between text-sm mb-1">
                                <span class="text-gray-500">推荐指数</span>
                                <span class="font-medium text-purple-600">82%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-purple-600 h-2 rounded-full" style="width: 82%"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => {
    router.push("/main");
};

</script>
<style scoped>
.card-hover {
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.recommend-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>